<template>
    <div>
        <ul class="sift-list">
            <div class="publish">
                <p>发布</p>
            </div>
            <li v-for="item in dataJson">
                <p>{{ item.name }}</p>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  props: {
    dataJson: {
      type: Object
    }
  }
};
</script>
<style lang="scss">
@import '../../common/scss/fun.scss';
.publish{
    background: #f9f9f9;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom: 2px solid #d4d4d4;
    cursor: pointer;

    p{
        width: 80%;
        margin: 15px 10%;
        color: #777;
        @extend %ani;

        &:hover{
            color: #000;
        }
    }
}
.sift-list{
    background: #f9f9f9;
    border-radius: 4px;
    list-style-type: none;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    
    li{
        width: 80%;
        margin: 0 10%;
        padding: 15px 0;
        border-bottom: 1px solid #e4e4e4;

        &:last-child{
            border-bottom: none;
        }

        p{
            color: #777;
            cursor: pointer;
            @extend %ani;

            &:hover{
                color: #000;
            }
        }
        
        &.publish{
            width: 100%;
            margin: 0;
            padding-left: 10%;
            border-bottom: 1px solid #e4e4e4;
        }
    }
}
</style>
